<template>
	<view class="com-keyboard yb-flex y-row y-wrap" :style="{
		'background-color': bgColor
	}">
		<view class="com-keyboard-key position-relative yb-flex"
		v-for="(item, index) in keys" :key="index"
		:style="{ 'border-color': borderColor }">
			<text v-if="item.type == 'num'" class="fs-45 fw-bold" :style="{color: textColor}">{{item.value}}</text>
			<com-icon v-if="item.value == 'delete'" name="back_delete" :color="textColor" size="45"></com-icon>
			<view class="com-keyboard-key-mask position-absolute-cover" @tap="selectNum(index)" v-if="item.type == 'num' || item.value == 'delete'"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: String,
				default: ''
			},
			count: {
				type: [String, Number],
				default: 6
			},
			bgColor: {
				type: String,
				default: '#FFFFFF'
			},
			borderColor: {
				type: String,
				default: '#EEEEEE'
			},
			textColor: {
				type: String,
				default: '#333333'
			}
		},
		data () {
			return {
				keys: [{
					type: 'num',
					value: 1
				},{
					type: 'num',
					value: 2
				},{
					type: 'num',
					value: 3
				},{
					type: 'num',
					value: 4
				},{
					type: 'num',
					value: 5
				},{
					type: 'num',
					value: 6
				},{
					type: 'num',
					value: 7
				},{
					type: 'num',
					value: 8
				},{
					type: 'num',
					value: 9
				},{
					type: 'other',
					value: ''
				},{
					type: 'num',
					value: 0
				},{
					type: 'other',
					value: 'delete'
				}],
				valueSync: ''
			}
		},
		created () {
			this.valueSync = this.value
		},
		methods: {
			selectNum (index) {
				if ( this.keys[index].type == 'num' && this.valueSync.length < this.count ) {
					this.valueSync += this.keys[index].value
				}
				if ( this.keys[index].value == 'delete' && this.valueSync.length > 0 ) {
					this.valueSync = this.valueSync.slice(0, this.valueSync.length - 1)
				}
				this.$emit('input', this.valueSync)
			}
		},
		watch: {
			value (newVal) {
				if ( newVal != this.valueSync ) {
					this.valueSync = newVal
				}
			}
		}
	}
</script>

<style scoped>
	.com-keyboard-key {
		width: 250rpx;
		justify-content: center;
		align-items: center;
		height: 130rpx;
		border-width: 1px;
	}
	.com-keyboard-key-mask:active {
		background-color: rgba(0,0,0,.3);
	}
</style>
